<template>
  <div class="tab-content">
    <el-form ref="form" label-position="top" :rules="rules" :model="editModel">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="CPU Reservation" prop="requestsCpu">
            <ko-data-item
              v-model="editModel.requestsCpu"
              placeholder="e.g. 1000"
              clearable
              itemType="number"
              dividerName="mCPUs"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Memory Reservation" prop="requestsMemory">
            <ko-data-item
              v-model="editModel.requestsMemory"
              placeholder="e.g. 128"
              clearable
              itemType="number"
              dividerName="Mi"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="CPU Limit" prop="limitsCpu">
            <ko-data-item
              v-model="editModel.limitsCpu"
              placeholder="e.g. 128"
              clearable
              itemType="number"
              dividerName="mCPUs"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Memory Limit" prop="limitsMemory">
            <ko-data-item
              v-model="editModel.limitsMemory"
              placeholder="e.g. 128"
              clearable
              itemType="number"
              dividerName="Mi"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import KoDataItem from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";

const editModel = defineModel<any>("resourceLimit");
const rules = {};
</script>

<style scoped>
.tab-content {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
